<template>
  <view class="container">
    <view class="bg">
      <view class="loginBox">
        <view class="header">
          智能河长管家
        </view>
        <view class="wordbox">
          <view class="name"><u-icon name="account" size="40"></u-icon></view>
          <u-input v-model="username" placeholder="请输入账号" :clearable="clearable"></u-input>
        </view>
        <view class="wordbox">
          <view class="pass"><u-icon name="lock" size="40"></u-icon></view>
          <u-input v-model="password" placeholder="请输入密码" type="password" :clearable="clearable" class="input"></u-input>
        </view>
        <u-button type="primary ">登录</u-button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        username: '',
        password: '',
        isLoading: false,
        clearable: false
      }
    },
    onLoad() {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .u-input__right-icon {
    float: right;
  }
  
  ::v-deep .u-input__right-icon__clear {
    position: absolute;
    right: 5px;
  }
  
  .container {
    background-image: url(http://gm.iotcloudsoft.com:8000/static/media/login.ed1bce98.jpg);
    background-size: 100% 100%;
  }

  .bg {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    /* 将当前容器变为弹性容器 */
    display: flex;
    flex-direction: column;
    /* 主轴方向 */
    justify-content: center;
    /*  */
    align-items: center;
  }

  .loginBox {
    width: 600rpx;
    height: 500rpx;
    background-color: rgba(255, 255, 255, .5);
    /* 半透明 */
    margin: auto;
    /* 自动居中 */
    border-radius: 30rpx;
    /* 圆角 */
    padding: 40rpx;
    /* 内边距 */
    margin-top: 350rpx;
  }
  
  .header {
    width: 100%;
    height: 70px;
    line-height: 70px;
    font-size: 25px;
    text-align: center;
    background: url(../../static/my-images/login.png) no-repeat;
    background-size: 20% 100%;
    margin-bottom: 15px;
  }

  .wordbox {
    display: flex;
    position: relative;
    margin-bottom: 10px;
    border: 1px solid #cccccc;
    background-color: #ffffff;

    view {
      width: 30px;
      line-height: 38px;
    }
  }
  
  .pass {
    margin: 0 0 0 10px;
  }
  
  .name {
    margin: 0 0 0 10px;
  }
  
  .input {
    width: 80%;
  }
</style>
